<template>
	<div class="swiper-container">
		<div class="swiper-button-prev">&lt;</div>
		<div class="swiper-wrapper">
			<div
				class="swiper-slide"
				v-for="(item, index) in skuImageList"
				:key="index.id"
			>
				<img
					:class="{ active: currentIndex === index }"
					:src="item.imgUrl"
					@click="changDefault(index)"
				/>
			</div>
		</div>
		<div class="swiper-button-next">&gt;</div>
	</div>
</template>

<script>
export default {
	name: 'ImageList',
	data() {
		return {
			// 初始选中样式
			currentIndex: 0,
		};
	},
	props: ['skuImageList'],
	methods: {
		// 点击选中图片并修改大图片
		changDefault(num) {
			this.currentIndex = num;
			this.$bus.$emit('changImgUrl', this.currentIndex);
		},
	},
};
</script>

<style scoped>
.swiper-container {
	height: 56px;
	width: 412px;
	box-sizing: border-box;
	font-size: 18px;
}
.swiper-container .swiper-slide {
	float: left;
	width: 56px;
	height: 56px;
	margin: 0 3px;
}
.swiper-container .swiper-slide img {
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
	padding: 2px;
	width: 50px;
	height: 50px;
	display: block;
}
.swiper-wrapper {
	overflow: hidden;
	max-width: 372px;
	height: 56px;
}
.swiper-container .swiper-slide .active {
	border-color: #f60;
}
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev {
	box-sizing: border-box;
	width: 15px;
	height: 56px;
	line-height: 56px;
	background: #ebebeb;
	color: #999;
	border: 1px solid #cccccc;
}
.swiper-container .swiper-button-next::after,
.swiper-container .swiper-button-prev::after {
	font-size: 12px;
}
.swiper-container > div {
	float: left;
}
</style>
